<div class="control-panel">
    <div class="panel-header modal-header dialog-header-group">
        <h4 class="modal-title text-center">
            <i class="fa fa-plus-square-o"></i> {{ 'groupMgr.add.title' | translate}}
        </h4>
    </div>
    <div>
        <ng-form name="addGroupForm" novalidate role="form">
            <div class="form-group input-group-lg" ng-class="{true: 'has-error'}[addGroupForm.code.$dirty && addGroupForm.code.$invalid]">
                <label class="panel-label" for="name">{{ 'groupMgr.groupName'| translate}}:</label>
                <input type="text" class="panel-input form-control" placeholder="{{ 'groupMgr.groupName'| translate}}" id="name" ng-model="grp.name" required>
                <label class="panel-label" for="code">{{ 'groupMgr.add.groupCode' | translate}}:</label>
                <input type="text" class="panel-input form-control" placeholder="{{ 'groupMgr.add.groupKey' | translate}}" id="code" ng-model="grp.code" required>
                <label class="panel-label" for="description" placeholder="{{ 'groupMgr.add.groupDesc'| translate}}">{{ 'groupMgr.add.groupDesc'| translate}}:</label>
                <textarea id="description" class="panel-textarea form-control" placeholder="{{ 'groupMgr.add.groupDesc'| translate}}" ng-model="grp.description"></textarea>
            </div>
        </ng-form>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-info" ng-click="addGroup()"
                ng-disabled="(addGroupForm.$dirty && addGroupForm.$invalid) || addGroupForm.$pristine">{{ 'groupMgr.add.confirm' | translate}}</button>
    </div>
</div>
